<template>
  <view class="bg-[#060606] min-h-screen overflow-hidden" :style="themeColor()" v-if="memberStore.info">
    <image src="@/image/lqzx/banner.png" style="width: 95%;height: 194rpx;margin-left: 2.5%;"/>
    <view class=" left-0 top-0 right-0 z-10">
      <scroll-view :scroll-x="true" class="scroll-Y box-border px-[var(--sidebar-m)]">
        <view class="flex whitespace-nowrap justify-around items-center h-[88rpx]">
          <view :class="['text-[28rpx] text-[#666666] h-[40rpx] leading-[40rpx]', { 'class-select !text-primary': couponStatus === item.status }]" @click="statusClickFn(item.status)" v-for="(item, index) in statusList">{{ item.status_name }}({{ item.count }})</view>
        </view>
      </scroll-view>
      <scroll-view :scroll-x="true" scroll-with-animation :scroll-into-view="'id' + (subActive ? subActive - 1 : 0)"  class="px-[var(--sidebar-m)]  box-border">
        <view class="items-center flex h-[88rpx] gap-[20rpx]">
          <text class="flex-shrink-0 w-[120rpx] h-[50rpx] text-[24rpx] leading-[48rpx] pr-[10rpx] text-center text-[#999999] bg-class-img" :class="{'!text-[#ffffff] bg-class-img-s':item.value == curType}"
                v-for="(item,index) in typeList" :key="index" :id="'id' + index"
                @click="typeClick(index,item.value)">{{item.label}}
          </text>
        </view>
      </scroll-view>
    </view>

    <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="{ use: false }" @up="getMyCouponListFn">
      <view class="py-[20rpx] px-[var(--sidebar-m)]" v-if="list.length">
        <template v-for="(item, index) in list">
          <view v-if="couponStatus != 1"
                class="flex text-[#fff] items-center relative w-[100%] rounded-[16rpx] overflow-hidden ysy-class" :class="{'mt-[20rpx]':index}">
            <view class=" w-[180rpx] h-[160rpx] flex  flex-col items-center justify-center rounded-[16rpx] relative coupon-item">
              <view class="price-font flex items-baseline" :class="{'text-[#fff]' : couponStatus == 2 , 'text-[#FFB4B1]' : couponStatus == 3}">
                <text class="text-[24rpx] text-[#999999] leading-[34rpx] mr-[2rpx] text-center price-font font-500">￥</text>
                <text class="text-[70rpx] text-[#999999] font-500 leading-[58rpx] price-font truncate">{{ item.coupon_price }}</text>
              </view>
            </view>
            <view class="ml-[30rpx] flex-1">
              <view class="text-[28rpx] leading-[40rpx] text-left font-500 flex gap-[10rpx] item-center">
                <text v-if="item.min_condition_money === '0.00'">无门槛</text>
                <text v-else>满{{ item.coupon_min_price }}元可用</text>
                <text class="tyq-class">{{ item.type_name }}</text>
              </view>
              <view class="mt-[6rpx] flex items-center">
                <text class="truncate max-w-[226rpx] text-[24rpx] text-[#999999] leading-[34rpx]">{{ item.title }}</text>
              </view>
              <view class="w-[100%] mt-[6rpx] text-[24rpx] leading-[34rpx] text-[#999999]">
                <text>有效期至<text>{{ item.expire_time ? item.expire_time.slice(0, 10) : '' }}</text></text>
              </view>
            </view>
            <view class="px-[20rpx]">
              <image src="@/image/lqzx/ygq.png" class="w-[160rpx] h-[140rpx] mt-[20rpx] mr-[-20rpx]" v-if="couponStatus == 3"/>
              <image src="@/image/lqzx/ysy.png" class="w-[160rpx] h-[140rpx] mt-[20rpx] mr-[-20rpx]" v-if="couponStatus == 2"/>
<!--              <button class="rounded-full remove-border" :style="{width:'120rpx',height:'54rpx',color:'#fff', fontSize:'26rpx',lineHeight:'54rpx', padding:'0',border:'none',backgroundColor:'#FFB4B1'}" v-if="couponStatus == 2">已使用</button>-->
<!--              <button class="rounded-full remove-border" :style="{width:'120rpx',height:'54rpx',color:'#FFB4B1', fontSize:'26rpx',lineHeight:'54rpx', padding:'0',border:'none',backgroundColor:'#FFE2E4'}" v-if="couponStatus == 3">已过期</button>-->
            </view>
          </view>
          <view v-else class="flex items-center relative w-[100%] rounded-[16rpx] overflow-hidden yhq-wgq" :class="{'mt-[20rpx]' : index}">
            <view class="w-[180rpx] h-[160rpx] flex  flex-col items-center justify-center rounded-[16rpx] relative coupon-item">
              <view class="price-font flex items-baseline text-[#fff]">
                <text class="text-[28rpx] leading-[34rpx] mr-[2rpx] text-center price-font font-500">￥</text>
                <text class="text-[70rpx] font-500 leading-[58rpx] price-font truncate">{{ item.coupon_price }}</text>
              </view>
            </view>
            <view class="ml-[30rpx] flex-1 text-[#E9CACA]">
              <view class="text-[28rpx] leading-[40rpx] text-left font-bold text-[#fff] flex gap-[10rpx] item-center">
                <text v-if="item.min_condition_money === '0.00'">无门槛</text>
                <text v-else>满{{ item.coupon_min_price }}元可用</text>
                <text class="tyq-class">{{ item.type_name }}</text>
              </view>
              <view class="text-[20rpx]  mt-[6rpx] flex items-center">
                <text class="truncate max-w-[226rpx] text-[24rpx] leading-[34rpx]">{{ item.title }}</text>
              </view>
              <view class="w-[100%] mt-[6rpx] text-[24rpx] leading-[34rpx]">
                <text>有效期至<text>{{ item.expire_time ? item.expire_time.slice(0, 10) : '' }}</text></text>
              </view>
            </view>
            <view class="px-[20rpx]" v-if="couponStatus === 1">
              <button hover-class="none" class="text-[#450000] remove-border qsy-class" :style="{width:'120rpx',height:'54rpx',color:'#fff', fontSize:'26rpx',lineHeight:'54rpx', padding:'0',border:'none'}" @click="toLink(item.coupon_id)">去使用</button>
            </view>
          </view>
        </template>
      </view>
      <view class="noData my-[20rpx] mx-[24rpx] rounded-[20rpx] flex items-center justify-center" v-if="!list.length && loading">
        <mescroll-empty :option="{'tip' : '暂无优惠券'}"></mescroll-empty>
      </view>
    </mescroll-body>
    <pay ref="payRef"></pay>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { img, redirect } from '@/utils/common'
import { getMyCouponList, getMyCouponType, getMyCouponStatusCount } from '@/addon/shop/api/coupon'
import useMemberStore from '@/stores/member'
import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue'
import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue'
import useMescroll from '@/components/mescroll/hooks/useMescroll.js'
import { onLoad,onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import { t } from '@/locale'

const memberStore = useMemberStore()
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom)
const list = ref<Array<Object>>([]);
const loading = ref<boolean>(false);
const statusList = ref<Array<Object>>([]);
const couponStatus = ref(1);

const getMyCouponStatusCountFn = () =>{
  getMyCouponStatusCount().then(res =>{
    statusList.value = res.data.filter(item => item.status != 4)
  })
}
const statusClickFn = (status: any) => {
  couponStatus.value = status;
  list.value = []; //如果是第一页需手动制空列表
  getMescroll().resetUpScroll();
};

const getMyCouponListFn = (mescroll) => {
  loading.value = false;
  let data: object = {
    page: mescroll.num,
    limit: mescroll.size,
    status: couponStatus.value,
    type: curType.value
  };

  getMyCouponList(data).then((res) => {
    let newArr = (res.data.data as Array<Object>);
    //设置列表数据
    if (mescroll.num == 1) {
      list.value = []; //如果是第一页需手动制空列表
    }
    list.value = list.value.concat(newArr);
    mescroll.endSuccess(newArr.length);
    loading.value = true;
  }).catch(() => {
    loading.value = true;
    mescroll.endErr(); // 请求失败, 结束加载
  })
}
const toLink = (coupon_id:any) => {
  redirect({ url: '/addon/shop/pages/goods/list',param:{coupon_id} })
}

// 类型
const subActive = ref<number>(0)
const curType = ref('all')
const typeList = ref<Array<Object>>([])
const getMyCouponTypeFn = () =>{
  getMyCouponType().then(res =>{
    const obj = { label: '全部', value: 'all' };
    typeList.value.push(obj)
    typeList.value = typeList.value.concat(res.data)
  })
}
onLoad(()=>{
  getMyCouponTypeFn()
  getMyCouponStatusCountFn()
})

const typeClick = (index : number,data:any) =>{
  subActive.value = index
  curType.value = data
  list.value = []
  getMescroll().resetUpScroll()
}
</script>

<style lang="scss" scoped>
.remove-border {
  &::after {
    border: none;
  }
}

.class-select {
  position: relative;
  font-weight: 500;

  &::before {
    content: "";
    position: absolute;
    bottom: -16rpx;
    height: 6rpx;
    background-color: $u-primary;
    width: 40rpx;
    left: 50%;
    border-radius: 100rpx;
    transform: translateX(-50%);
  }
}

.coupon-bg{
  background: linear-gradient( 169deg, #FF7C36 0%, #FF2D00 86%);
}

.noData{
  height: calc(100vh - 224rpx - constant(safe-area-inset-bottom));
  height: 50vh;
}
.coupon-item{
  //:before{
  //  content: '';
  //  display: block;
  //  width: 28rpx;
  //  height: 28rpx;
  //  background-color: #f8f8f8;
  //  position: absolute;
  //  top: 50%;
  //  left: -14rpx;
  //  border-radius:14rpx;
  //  transform: translateY(-50%);
  //}
  //:after{
  //  content: '';
  //  display: block;
  //  width: 28rpx;
  //  height: 28rpx;
  //  background-color: #fff;
  //  position: absolute;
  //  top: 50%;
  //  right: -14rpx;
  //  border-radius:14rpx;
  //  transform: translateY(-50%);
  //}
}
:deep(.uni-page-head) {
  background-color: #060606 !important;
  color: #FFFFFF !important;
  path {
    fill: #ffffff;
  }
}
.bg-class-img {
  background-image: url("../../../../image/lqzx/no.png");
  background-size: 101% 100%;
}
.bg-class-img-s {
  background-image: url("../../../../image/lqzx/yes.png");
  background-size: 101% 100%;
}
.yhq-wgq {
  background-image: url("../../../../image/lqzx/quan-bg.png");
  background-size: 107% 122%;
  background-position: center;
}
.tyq-class {
  display: block;
  text-align: center;
  width: 90rpx;
  height: 38rpx;
  background: #FFFFFF40;
  border-radius: 4rpx;
  font-size: 22rpx;
}
.qsy-class {
  width: 140rpx;
  height: 60rpx;
  color: #450000 !important;
  background: linear-gradient( 180deg, #FFFBF0 0%, #FFC855 100%);
}
.ysy-class {
  background-image: url("../../../../image/lqzx/quan-h-bg.png");
  background-size: 107% 122%;
  background-position: center;
}
</style>